<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="angular-animate.min.js"></script>
<script>
    var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);
    animateApp.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'mainController'
            })
            .when('/about', {
                templateUrl: 'about.html',
                controller: 'aboutController'
            })
            .when('/contact', {
                templateUrl: 'contact.html',
                controller: 'contactController'
            });

    });
    animateApp.controller('mainController', function($scope) {
        $scope.pageClass = 'page-home';
    });
    animateApp.controller('aboutController', function($scope) {
        $scope.pageClass = 'page-about';
    });
    animateApp.controller('contactController', function($scope) {
        $scope.pageClass = 'page-contact';
    });
</script>
</head>
<body ng-app="animateApp">
	<div class="page {{ pageClass }}" ng-view></div>
    <div id="about">
        <p>A demo on Angular Animations: ng-view</p>
        <p>View the <a href="http://scotch.io/tutorials/javascript/animating-angularjs-apps-ngview">Scotch.io Tutorial</a></p>
    </div>
		
</body>
<script id="home.html" type="text/ng-template">
	<h3>Angular Animations Shenanigans</h3>
	<h4>Home</h4>
	<a href="#about" class="btn btn-success btn-lg">About</a>
	<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
</script>
<script type="text/ng-template" id="about.html">
	<h3>Animating Pages Is Fun</h3>
	<h4>About</h4>
	<a href="#" class="btn btn-primary btn-lg">Home</a>
	<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
</script>
<script type="text/ng-template" id="contact.html">
	<h3>Tons of Animations</h3>
	<h4>Contact</h4>
	<a href="#" class="btn btn-primary btn-lg">Home</a>
	<a href="#about" class="btn btn-success btn-lg">About</a>
</script>
<style>
	/* BASE STYLES
============================================================================= */
	html         { overflow-y:hidden; }
	.page        {
		bottom:0;
		padding-top:200px;
		position:absolute;
		text-align:center;
		top:0;
		width:100%;
	}

	.page h3 	{ font-size:40px; }
	.page a     { margin-top:30px; }
	#about      { color:#333; position:absolute; text-align:center; top:50px; width:100%; }

	/* PAGES
    ============================================================================= */
	.page-home 		{ background:#00D0BC; color:#00907c; }
	.page-about 	{ background:#E59400; color:#a55400; }
	.page-contact 	{ background:#ffa6bb; color:#9e0000; }

	/* ANIMATIONS
    ============================================================================= */

	.page.ng-leave 	{ z-index:9999; }
	.page.ng-enter 	{ z-index:8888; }

	/* page specific animations ------------------------ */

	/* home -------------------------- */
	.page-home.ng-leave         {
		-webkit-transform-origin: 0% 0%;
		-webkit-animation: rotateFall 1s both ease-in;
		-moz-transform-origin: 0% 0%;
		-moz-animation: rotateFall 1s both ease-in;
		transform-origin: 0% 0%;
		animation: rotateFall 1s both ease-in;
	}
	.page-home.ng-enter 		{
		-webkit-animation:scaleUp 0.5s both ease-in;
		-moz-animation:scaleUp 0.5s both ease-in;
		animation:scaleUp 0.5s both ease-in;
	}

	/* about ------------------------ */
	.page-about.ng-leave        {
		-webkit-animation:slideOutLeft 0.5s both ease-in;
		-moz-animation:slideOutLeft 0.5s both ease-in;
		animation:slideOutLeft 0.5s both ease-in;
	}
	.page-about.ng-enter 		{
		-webkit-animation:slideInRight 0.5s both ease-in;
		-moz-animation:slideInRight 0.5s both ease-in;
		animation:slideInRight 0.5s both ease-in;
	}

	/* contact ---------------------- */
	.page-contact.ng-leave      {
		-webkit-transform-origin: 50% 50%;
		-webkit-animation: rotateOutNewspaper .5s both ease-in;
		-moz-transform-origin: 50% 50%;
		-moz-animation: rotateOutNewspaper .5s both ease-in;
		transform-origin: 50% 50%;
		animation: rotateOutNewspaper .5s both ease-in;
	}
	.page-contact.ng-enter 		{
		-webkit-animation:slideInUp 0.5s both ease-in;
		-moz-animation:slideInUp 0.5s both ease-in;
		animation:slideInUp 0.5s both ease-in;
	}

	/* rotate and fall */
	@-webkit-keyframes rotateFall {
		0% { -webkit-transform: rotateZ(0deg); }
		20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
		40% { -webkit-transform: rotateZ(17deg); }
		60% { -webkit-transform: rotateZ(16deg); }
		100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
	}
	@-moz-keyframes rotateFall {
		0% { -moz-transform: rotateZ(0deg); }
		20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
		40% { -moz-transform: rotateZ(17deg); }
		60% { -moz-transform: rotateZ(16deg); }
		100% { -moz-transform: translateY(100%) rotateZ(17deg); }
	}
	@keyframes rotateFall {
		0% { transform: rotateZ(0deg); }
		20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
		40% { transform: rotateZ(17deg); }
		60% { transform: rotateZ(16deg); }
		100% { transform: translateY(100%) rotateZ(17deg); }
	}

	/* scale up */
	@keyframes scaleUp {
		from 		{ opacity: 0.3; transform: scale(0.8); }
	}
	@-moz-keyframes scaleUp {
		from 		{ opacity: 0.3; -moz-transform: scale(0.8); }
	}
	@-webkit-keyframes scaleUp {
		from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
	}

	/* slide in from the right */
	@keyframes slideInRight {
		from 	{ transform:translateX(100%); }
		to 		{ transform: translateX(0); }
	}
	@-moz-keyframes slideInRight {
		from 	{ -moz-transform:translateX(100%); }
		to 		{ -moz-transform: translateX(0); }
	}
	@-webkit-keyframes slideInRight {
		from 	{ -webkit-transform:translateX(100%); }
		to 		{ -webkit-transform: translateX(0); }
	}

	/* slide in from the bottom */
	@keyframes slideInUp {
		from 	{ transform:translateY(100%); }
		to 		{ transform: translateY(0); }
	}
	@-moz-keyframes slideInUp {
		from 	{ -moz-transform:translateY(100%); }
		to 		{ -moz-transform: translateY(0); }
	}
	@-webkit-keyframes slideInUp {
		from 	{ -webkit-transform:translateY(100%); }
		to 		{ -webkit-transform: translateY(0); }
	}

	/* slide in from the bottom */
	@keyframes slideOutLeft {
		to 		{ transform: translateX(-100%); }
	}
	@-moz-keyframes slideOutLeft {
		to 		{ -moz-transform: translateX(-100%); }
	}
	@-webkit-keyframes slideOutLeft {
		to 		{ -webkit-transform: translateX(-100%); }
	}

	/* rotate out newspaper */
	@-webkit-keyframes rotateOutNewspaper {
		to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
	}
	@-moz-keyframes rotateOutNewspaper {
		to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
	}
	@keyframes rotateOutNewspaper {
		to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
	}

</style>
</html>
